<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光子特效</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <div class="container">
        <div class="dot_up">
            <div class="dot_container">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="dot_star_container">
                <div class="dot_star"></div>
                <div class="dot_star"></div>
                <div class="dot_star"></div>
                <div class="dot_star"></div>
            </div>
        </div>
        
        <div class="bg_light">
            
        </div>
        <div class="bg_light_clockwise"></div>
        <div class="bg_light_counterclockwise"></div>
        <!-- <div class="goods"></div> -->
    </div>
</body>
</html>
<script src="./index.js"></script>
<script>
    let classList = ['dot', 'dot_star']
    for (let i = 0; i< 50; i++) {
        let random = Math.random(0,1) > 0.5 ? 1: 0
        $('.dot_container').append(`<div id='id_${i}' class="${classList[random]}"></div>`)
        setTimeout(() => {
            move(i)
        }, 10 * i)
        
    }
    function move(i) {
        let random_x = parseInt(Math.random(0,1) * 80 - 30)
        let random_y = parseInt(Math.random(0,1) * 80 - 50)
        $(`#id_${i}`).animate({
            transform: `translate(${random_x}vw, ${random_y}vw)`,
            'animation-delay': i + 0.5 + 's',
            'opacity': 0
        }, 2000, () => {
            $(`#id_${i}`).remove()
        })
    }
</script>